import {
  PageContainer,
} from '@ant-design/pro-components';
import { ProList } from '@ant-design/pro-components';
import {Image, Space, Tag} from 'antd';
import {useState} from 'react';
import {matchUpsUsingGET} from "@/services/datafa-backend/upInfoController";
import message from "antd/es/message";
import React from 'react';
import { Modal } from 'antd';
import { Descriptions } from 'antd';
//import MatchList from "@/pages/MatchTableList/components/MatchList";

// type DataItem = (typeof defaultData)[number];

const TableList: React.FC = () => {
  // const dataSource = useRef<API.UpInfoVO[]>();
  const [dataSource, setDataSource] = useState<API.UpInfoVO>();

  const [desc, setDesc] = useState<API.UpInfoVO>();

  const loadData = async () => {
    const res: API.BaseResponseListUpInfoVO_ = await matchUpsUsingGET();
    try {
      if(res.code === 0) {
        setDataSource(res?.data as API.UpInfoVO)
        //dataSource.current = res.data;
        message.success("获取列表成功")
      } else {
        message.error(res.message);
      }
    } catch (error) {
      message.error("获取列表失败");
    }
  }

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };





  return (
    <PageContainer>
      <Modal width={800}  title="Up主具体信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Descriptions>
          <Descriptions.Item label="up主">{desc?.upName}</Descriptions.Item>
          <Descriptions.Item label="性别">{desc?.gender}</Descriptions.Item>
          <Descriptions.Item label="平均播放数">{desc?.avgPlayCount}</Descriptions.Item>
          <Descriptions.Item label="平均点赞数">{desc?.avgLikeCount}</Descriptions.Item>
          <Descriptions.Item label="平均收藏数">{desc?.avgFavoriteCount}</Descriptions.Item>
          <Descriptions.Item label="平均分享数">{desc?.avgShareCount}</Descriptions.Item>
          <Descriptions.Item label="平均评论数">{desc?.avgCommentCount}</Descriptions.Item>
          <Descriptions.Item label="平均弹幕数">{desc?.avgDanmuCount}</Descriptions.Item>
          <Descriptions.Item label="植入视频价格">{desc?.embeddedVideo}</Descriptions.Item>
          <Descriptions.Item label="定制视频价格">{desc?.customizedVideo}</Descriptions.Item>
          <Descriptions.Item label="直发动态价格">{desc?.postedDynamic}</Descriptions.Item>
          <Descriptions.Item label="转发动态价格">{desc?.repostedDynamic}</Descriptions.Item>
          <Descriptions.Item label="地区">
            {desc?.region}
          </Descriptions.Item>
        </Descriptions>
      </Modal>
      <ProList<API.UpInfoVO>
        rowKey="id"
        headerTitle="根据您选择的标签推荐感兴趣用户"
        dataSource={dataSource}
        request={loadData}

        metas={{
          title: {
            render: (text, row, index, action) => [
              <a
                onClick={() => {
                  window.open(row.link)
                }}
                key="link"
              >
                {row.upName}
              </a>,
            ],
            dataIndex: 'upName',

          },
          avatar: {
            render: (text, row, index, action) => [
              <Image referrerPolicy={"no-referrer"} src={row.avatar} />
            ],
            dataIndex: 'avatar',
            editable: false,
          },
          description: {
            dataIndex: 'introduction',
          },
          subTitle: {
            render: (text, row) => {

              return (
                <Space size={0}>
                  {row?.tags?.map((tag) => (
                    <Tag color={"blue"}>
                      {tag}
                    </Tag>
                  ))}
                </Space>
              );
            },
          },
          actions: {
            render: (text, row, index, action) => [
              <a
                onClick={() => {
                  setDesc(row);
                  showModal()
                }}
                key="link"
              >
                具体信息
              </a>,
            ],
          },
        }}
      />

    </PageContainer>
  );
};
export default TableList;
